import './DEVCharts.scss'

import { useRef } from 'react';
import { useEffect } from 'react';
import { Radio } from 'antd'
import Chart, { AdaptiveLayout, CommonSeriesSettings, Size, Tooltip, Export, Label, Format, Legend, Margin } from 'devextreme-react/chart'

import { devChartsStore } from '../../Config/zustand'
import { useState } from 'react';
import { useSize } from 'ahooks';

const ChartsType = [
    { value: 'bar', label: '柱图' },
    { value: 'stackedbar', label: '堆叠柱图' },
    { value: 'fullstackedbar', label: '百分比全堆叠' },
    { value: 'splinearea', label: '面积图(重叠)' },
    { value: 'stackedsplinearea', label: '面积图(不重叠)' },
    { value: 'fullstackedsplinearea', label: '百分比面积图' },
    { value: 'spline', label: '折线图' },
    { value: 'stackedspline', label: '堆叠折线图' },
    { value: 'fullstackedspline', label: '百分比折线图' },
]



const DEVCharts = () => {
    const chartRef = useRef()
    const chartBox = useRef()
    const size = useSize(chartBox)
    const { devPivot } = devChartsStore()

    const [Type, setType] = useState('bar')

    useEffect(() => {
        if (devPivot.current) {
            devPivot.current.instance().bindChart(chartRef.current.instance(), { dataFieldsDisplayMode: 'splitPanes', alternateDataFields: false })
        }
    }, [devPivot])
    const customizeTooltip = (args) => {
        const valueText = args.seriesName.indexOf('Total') !== -1 ?
            new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue,) : args.originalValue;
        return { html: `${args.seriesName}<div class='currency'>${valueText}</div>` }
    }

    return (
        <div className='DEVCharts'>
            <div className='Charts' ref={chartBox}>
                <Chart ref={chartRef}>
                    <Size height={size?.height || 600} />
                    <Tooltip enabled={true} location="edge" customizeTooltip={customizeTooltip} />
                    <Label enabled={true} >
                        <Format precision={1} type="fixedPoint" />
                    </Label>
                    <CommonSeriesSettings type={Type} />
                    <AdaptiveLayout width={600} />
                    <Export enabled={true} />
                    <Legend
                        verticalAlignment="top"
                        horizontalAlignment="center"
                        itemTextPosition="right"
                    />
                    <Margin bottom={16} />
                </Chart>

            </div>
            <div className='Options'>
                <div className='Label' >
                    <div>图例类型</div>
                    <Radio.Group buttonStyle="solid" value={Type} onChange={e => setType(e.target.value)}>
                        {ChartsType.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                    </Radio.Group>
                </div>
            </div>
        </div>
    );
};

export default DEVCharts;